<template>
  <div class="city-group">
    <van-index-bar highlight-color="#ff9854" :index-list="indexList">
      <van-index-anchor index="#">热门</van-index-anchor>
      <div class="hotCities">
        <template v-for="(item, index) in currentCityGroup.hotCities" :key="index">
          <div class="hotCity" @click="clickCity(item)">{{ item.cityName }}</div>
        </template>
        <div class="hotcity"></div>
      </div>
      <template v-for="groupCity in currentCityGroup.cities" :key="groupCity.group">
        <van-index-anchor :index="groupCity.group" />
        <template v-for="secCities in groupCity.cities" :key="secCities.cityId">
          <van-cell :title="secCities.cityName" @click="clickCity(secCities)" />
        </template>
      </template>
    </van-index-bar>


  </div>
</template>

<script setup>
import { getCityIndexList } from '@/utils/getCityIndexList';
import { useRouter } from 'vue-router';
const router = useRouter()
import useCityStore from '@/store/modules/city';
const cityStore = useCityStore()

const { currentCityGroup } = defineProps({
  currentCityGroup: {
    type: Object,
    default: () => ({})
  }
}
)

const indexList = getCityIndexList(currentCityGroup)

function clickCity(city) {
  cityStore.currentCity = city
  router.back()
}


</script>

<style lang="less" scoped>
.hotCities {
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;

  .hotCity {
    margin-right: 20px;
    margin-bottom: 10px;
    width: 70px;
    height: 28px;
    font-size: 12px;
    color: #000;
    line-height: 28px;
    text-align: center;
    background-color: #fff4ec;
    border-radius: 14px;

  }
}
</style>